import { useStore } from '../../store';
import { observer } from 'mobx-react-lite';

const BoneProperty = observer((props: any) => {
    const { propertyStore } = useStore();

    const handleBoneData = () => {
    };

    
    const updateBoneLength =  (e: any) => {
        propertyStore.setBoneLength(e.target.valueAsNumber);

    };

    return (
        <div className='text-sm space-y-2 p-3'>
            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Name:</div>
                <div className='flex-1 flex justify-start'>
                    <input
                        type="text"
                        className="w-full rounded-sm border-gray-200 shadow-sm p-0 text-black"
                        value={propertyStore.boneData.name}
                        onChange={handleBoneData}
                    />
                </div>
            </div>

            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Type:</div>
                <div className='flex-1 flex justify-start'>
                    {propertyStore.type}
                </div>
            </div>

            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Length:</div>
                <div className='flex-1 flex justify-start'>
                    <input
                        type="number"
                        className="w-full rounded-sm border-gray-200 shadow-sm p-0 text-black"
                        value={propertyStore.boneData.length}
                        onChange={updateBoneLength}
                    />
                </div>
            </div>

            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Inherit:</div>
                <div className='flex-1 flex justify-start space-x-2'>
                    <div className="flex items-center">
                        <input id="default-checkbox" type="checkbox" value=""
                            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded
                          focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
                        <label htmlFor="default-checkbox" className="ml-1 text-sm font-medium">Scale</label>
                    </div>
                    <div className="flex items-center">
                        <input id="checked-checkbox" type="checkbox" value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
                        <label htmlFor="checked-checkbox" className="ml-1 text-sm font-medium">Rotation</label>
                    </div>
                </div>
            </div>


            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Bone Color:</div>
                <div className='flex-1 flex justify-start space-x-2'>
                    <div className='w-14 h-5 bg-gray-300 border-2 border-white'>
                    </div>
                    <svg fill="#ffffff" className='w-5 h-5' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299.289 299.289">
                        <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                        <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
                        <g id="SVGRepo_iconCarrier">
                            <g>
                                <g>
                                    <path d="M290.422,79.244L220.034,8.857c-11.794-11.795-30.986-11.795-42.78,0C175.866,10.245,12.971,173.14,8.867,177.244 c-11.822,11.821-11.824,30.957,0,42.78l70.388,70.388c11.821,11.822,30.957,11.824,42.78,0 c1.046-1.046,165.357-165.357,168.388-168.388C302.244,110.203,302.246,91.066,290.422,79.244z M110.367,278.744 c-5.374,5.373-14.071,5.373-19.446,0l-70.388-70.388c-5.373-5.374-5.375-14.071,0-19.446l34.61-34.61l89.834,89.834 L110.367,278.744z M278.755,110.357l-122.111,122.11l-89.833-89.833l122.11-122.111c5.374-5.374,14.071-5.374,19.446,0 l70.388,70.388C284.129,96.285,284.129,104.983,278.755,110.357z">
                                    </path>
                                </g>
                            </g>
                        </g>
                    </svg>
                </div>
            </div>

            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>IKConstraint:</div>
                <div className='flex-1 flex justify-start space-x-2'>
                    <svg fill="#ffffff" className='w-5 h-5' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299.289 299.289">
                        <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                        <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
                        <g id="SVGRepo_iconCarrier">
                            <g>
                                <g>
                                    <path d="M290.422,79.244L220.034,8.857c-11.794-11.795-30.986-11.795-42.78,0C175.866,10.245,12.971,173.14,8.867,177.244 c-11.822,11.821-11.824,30.957,0,42.78l70.388,70.388c11.821,11.822,30.957,11.824,42.78,0 c1.046-1.046,165.357-165.357,168.388-168.388C302.244,110.203,302.246,91.066,290.422,79.244z M110.367,278.744 c-5.374,5.373-14.071,5.373-19.446,0l-70.388-70.388c-5.373-5.374-5.375-14.071,0-19.446l34.61-34.61l89.834,89.834 L110.367,278.744z M278.755,110.357l-122.111,122.11l-89.833-89.833l122.11-122.111c5.374-5.374,14.071-5.374,19.446,0 l70.388,70.388C284.129,96.285,284.129,104.983,278.755,110.357z">
                                    </path>
                                </g>
                            </g>
                        </g>
                    </svg>

                    <svg fill="#ffffff" className='w-5 h-5' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299.289 299.289">
                        <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                        <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
                        <g id="SVGRepo_iconCarrier">
                            <g>
                                <g>
                                    <path d="M290.422,79.244L220.034,8.857c-11.794-11.795-30.986-11.795-42.78,0C175.866,10.245,12.971,173.14,8.867,177.244 c-11.822,11.821-11.824,30.957,0,42.78l70.388,70.388c11.821,11.822,30.957,11.824,42.78,0 c1.046-1.046,165.357-165.357,168.388-168.388C302.244,110.203,302.246,91.066,290.422,79.244z M110.367,278.744 c-5.374,5.373-14.071,5.373-19.446,0l-70.388-70.388c-5.373-5.374-5.375-14.071,0-19.446l34.61-34.61l89.834,89.834 L110.367,278.744z M278.755,110.357l-122.111,122.11l-89.833-89.833l122.11-122.111c5.374-5.374,14.071-5.374,19.446,0 l70.388,70.388C284.129,96.285,284.129,104.983,278.755,110.357z">
                                    </path>
                                </g>
                            </g>
                        </g>
                    </svg>
                </div>
            </div>


            {/* <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg> */}


            {/* <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Type:</div>
                <div className='flex-1 flex justify-start'>
                    <select id="countries" className="w-full rounded-sm border-gray-200 shadow-sm p-0 text-black">
                        <option selected>Choose a country</option>
                        <option value="US">United States</option>
                        <option value="CA">Canada</option>
                        <option value="FR">France</option>
                        <option value="DE">Germany</option>
                    </select>
                </div>
            </div> */}
        </div>
    )
})

export { BoneProperty }
